<template>
  <van-field
    :name="name"
    :label="label"
    :size="size"
    :value="value"
    :type="type"
    :fixed="fixed"
    :border="border"
    :disabled="disabled"
    :readonly="readonly"
    :clearable="clearable"
    :clickable="clickable"
    :required="required"
    :center="center"
    :password="password"
    :title-width="titleWidth"
    :maxlength="maxlength"
    :placeholder="placeholder"
    :placeholder-style="placeholderStyle"
    :custom-style="customStyle"
    :is-link="isLink"
    :arrow-direction="arrowDirection"
    :show-word-limit="showWordLimit"
    :error="error"
    :error-message="errorMessage"
    :error-message-align="errorMessageAlign"
    :input-align="inputAlign"
    :autosize="autosize"
    :left-icon="leftIcon"
    :right-icon="rightIcon"

    @focus="myEvent($event, 'focus')"
    @blur="myEvent($event, 'blur')"
    @click-icon="myEvent($event, 'click-icon')"
    @click-input="myEvent($event, 'click-input')"
    @clear="myEvent($event, 'clear')"
    @confirm="myEvent($event, 'confirm')"
    @linechange="myEvent($event, 'linechange')"
    @keyboardheightchange="myEvent($event, 'keyboardheightchange')"
    @input="myEvent($event, 'input')"
    @change="myEvent($event, 'change')"
  >
    <view slot="button">
      <slot name="button" />
    </view>
  </van-field>
  <!--    :confirm-type="confirmType"-->
  <!--    :confirm-hold="confirmHold"-->
  <!--    :hold-keyboard="holdKeyboard"-->
  <!--    :cursor-spacing="cursorSpacing"-->
  <!--    :adjust-position="adjustPosition"-->
  <!--    :show-confirm-bar="showConfirmBar"-->
  <!--    :selection-start="selectionStart"-->
  <!--    :selection-end="selectionEnd"-->
  <!--    :auto-focus="autoFocus"-->
  <!--    :disable-default-padding="disableDefaultPadding"-->
  <!--    :cursor="cursor"-->
  <!--    :clear-trigger="clearTrigger"-->
  <!--    :always-embed="alwaysEmbed"-->
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: () => ''
    },
    size: {
      type: String,
      default: () => ''
    },
    value: {
      type: Number,
      default: () => ''
    },
    type: {
      type: String,
      default: () => 'text'
    },
    fixed: {
      type: Boolean,
      default: () => false
    },
    focus: {
      type: Boolean,
      default: () => true
    },
    border: {
      type: Boolean,
      default: () => true
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    readonly: {
      type: Boolean,
      default: () => false
    },
    clearable: {
      type: Boolean,
      default: () => false
    },
    clickable: {
      type: Boolean,
      default: () => false
    },
    required: {
      type: Boolean,
      default: () => false
    },
    center: {
      type: Boolean,
      default: () => false
    },
    password: {
      type: Boolean,
      default: () => false
    },
    titleWidth: {
      type: String,
      default: () => '6.2em'
    },
    maxlength: {
      type: Number,
      default: () => -1
    },
    placeholder: {
      type: String,
      default: () => ''
    },
    placeholderStyle: {
      type: String,
      default: () => undefined
    },
    customStyle: {
      type: String,
      default: () => ''
    },
    isLink: {
      type: Boolean,
      default: () => false
    },
    arrowDirection: {
      type: String,
      default: () => ''
    },
    showWordLimit: {
      type: Boolean,
      default: () => false
    },
    error: {
      type: Boolean,
      default: () => false
    },
    errorMessage: {
      type: String,
      default: () => ''
    },
    errorMessageAlign: {
      type: String,
      default: () => ''
    },
    inputAlign: {
      type: String,
      default: () => 'left'
    },
    autosize: {
      type: Object,
      default: () => false
    },
    leftIcon: {
      type: String,
      default: () => ''
    },
    rightIcon: {
      type: String,
      default: () => ''
    },
    confirmType: {
      type: String,
      default: () => 'done'
    },
    confirmHold: {
      type: Boolean,
      default: () => false
    },
    holdKeyboard: {
      type: Boolean,
      default: () => false
    },
    cursorSpacing: {
      type: Number,
      default: () => 50
    },
    adjustPosition: {
      type: Boolean,
      default: () => true
    },
    showConfirmBar: {
      type: Boolean,
      default: () => true
    },
    selectionStart: {
      type: Number,
      default: () => -1
    },
    selectionEnd: {
      type: Number,
      default: () => -1
    },
    autoFocus: {
      type: Boolean,
      default: () => false
    },
    disableDefaultPadding: {
      type: Boolean,
      default: () => true
    },
    cursor: {
      type: Number,
      default: () => -1
    },
    clearTrigger: {
      type: String,
      default: () => 'focus'
    },
    alwaysEmbed: {
      type: Boolean,
      default: () => false
    }
  },

  data() {
    return {
    }
  },
  computed: {
    slots() {
      return Object.keys(this.$slots)
    }
  },
  methods: {
    myEvent(e, eventName) {
      if (eventName === 'input') {
        console.info(e)
      }
      this.$emit(eventName, e)
    }
  },
  created() {
    console.info('$slot', this.$slots)
  },
  beforeUpdate() {
  },
  onLoad(e) {
  }
}
</script>
<style scoped>
</style>
